<template>
  <mu-form ref="form" :model="form" :label-position="labelPosition">
    <mu-row gutter>
      <mu-col :key="index" v-for="(item,index) in items" :span="item.attr.width">
        <mu-form-item :prop="index" :label="item.attr.label" >
          <template v-if="item.attr.type === 'line'">
            <div class="flrc w100 padt2">
              <span class="padr5"> {{ item.attr.placeholder }} </span>
              <div class="flex1"><mu-divider></mu-divider></div>
            </div>
          </template>
          <template v-if="item.attr.type === 'text'">
            <mu-text-field v-model="form[index]" :placeholder="item.attr.placeholder" :disabled="!item.attr.enable || !$com.isbool(openEdit)"></mu-text-field>
          </template>

          <template v-if="item.attr.type === 'textarea'">
            <mu-text-field v-model="form[index]" :placeholder="item.attr.placeholder" multi-line :rows="3" :rows-max="9" :class="item.attr.class" :disabled="!item.attr.enable || !$com.isbool(openEdit)"></mu-text-field>
          </template>

          <template v-if="item.attr.type === 'date'">
            <mu-date-input :value-format="item.attr.format" :format="item.attr.format" landscape actions :type="item.attr.isMonth === '1'? 'month':'date'" v-model="form[index]" :placeholder="item.attr.placeholder" :class="item.attr.class" :disabled="!item.attr.enable || !$com.isbool(openEdit)"></mu-date-input>
          </template>

          <template v-if="item.attr.type === 'datetime'">

            <mu-date-input :value-format="item.attr.format" :format="item.attr.format" landscape actions type="dateTime" v-model="form[index]" :placeholder="item.attr.placeholder" :class="item.attr.class" :disabled="(!item.attr.enable || !$com.isbool(openEdit))"></mu-date-input>
          </template>

          <template v-if="item.attr.type === 'time'">
            <mu-date-input :type="item.attr.type" clock-type="24hr" :format="item.attr.format" landscape actions v-model="form[index]" :placeholder="item.attr.placeholder" :class="item.attr.class" :disabled="!item.attr.enable || !$com.isbool(openEdit)"></mu-date-input>
          </template>

          <template v-if="item.attr.type === 'select'">
            <mu-select :filterable="item.attr.find === '1'" v-model="form[index]"  :disabled="!item.attr.enable || !$com.isbool(openEdit)" :tags="item.attr.isTag">
              <mu-option v-for="choice in item.attr.choices" :key="choice.id" :label="choice.value" :value="choice.id"></mu-option>
            </mu-select>
          </template>

          <template v-if="item.attr.type === 'checkbox'">
            <mu-checkbox v-model="form[index]" :label="choice.value" :value="choice.id" :key="choice.id" v-for="choice in item.attr.choices" :disabled="!item.attr.enable || !$com.isbool(openEdit)"></mu-checkbox>
          </template>
          <template v-if="item.attr.type === 'radio'">
            <mu-radio v-model="form[index]" :label="choice.value" :value="choice.id" :key="choice.id" v-for="choice in item.attr.choices" :disabled="!item.attr.enable || !$com.isbool(openEdit)"></mu-radio>
          </template>
          <template v-if="item.attr.type === 'switch'">
            <mu-switch v-model="form[index]"></mu-switch>
          </template>

          <template v-if="item.attr.type === 'article'">
            <!--            <Editor v-on:change="(html)=>{form[index] = html}" ref="editor" :html="form[index]"></Editor>-->
            <!--            <vue-ueditor-wrap v-model="form[index]"></vue-ueditor-wrap>-->
            <wangeditor :html="form[index]" v-on:change="(html)=>{form[index] = html}"></wangeditor>
          </template>

          <template v-if="item.attr.type === 'pic'">
            <pic :value="form[index]" :name="index" v-on:change="(pics)=>{form[index] = pics}" :openEdit="openEdit"></pic>
          </template>

          <template v-if="item.attr.type === 'pics'">
            <pics :value="form[index]" :name="index" :pics.sync="form[index]" :openEdit="openEdit"></pics>
          </template>

          <template v-if="item.attr.type === 'file'">
            <file :value="form[index]" :name="index" v-on:change="(pics)=>{form[index] = pics}" :openEdit="openEdit"></file>
          </template>

          <template v-if="item.attr.type === 'files'">
            <pics :value="form[index]" :name="index" :pics.sync="form[index]" :openEdit="openEdit"></pics>
          </template>

          <template v-if="item.attr.type === 'entity'">
            <mu-row class="w100">
              <mu-col span="12" v-show="openEdit">
                <mu-button @click="openEntity(index)">选择</mu-button>
              </mu-col>
              <mu-col span="12">
<!--                <entityViewer :entityName="item.attr.enName" :multi="item.attr.multi" :id="form[index]" @change="(data)=>{entityViewerChange(form,index,data)}"></entityViewer>-->
                <entityListViewer :entityName="item.attr.enName" :multi="item.attr.multi" :id="form[index]" @change="(data)=>{entityViewerChange(form,index,data)}"></entityListViewer>
              </mu-col>
            </mu-row>
            <mu-dialog width="360" transition="slide-bottom" fullscreen :open="switches[index]">
              <mu-appbar color="primary" title="请选择">
                <mu-button slot="left" icon @click="closeEntity(index)">
                  <mu-icon value="close"></mu-icon>
                </mu-button>
              </mu-appbar>
              <div style="padding: 24px;">
                <entity :entity="item.attr.enName" :multi="item.attr.multi" @cancel="closeEntity(index)" @change="(select)=>{setEntity(select,index)}"></entity>
              </div>
            </mu-dialog>
          </template>

          <template v-if="item.attr.type === 'list'">
            <list style="width: 100%" @change="( data ) => { $set(form,index,data) }" :val="form[index]" :entityName="item.attr.enName" :multi="item.attr.multi"></list>
          </template>

          <template v-if="item.attr.type === 'arrayText'">
            <array-text :data.sync="form[index]" :labels="item.attr.labels" :enableMod="item.attr.mod"></array-text>
          </template>


          <template v-if="item.attr.type === 'sons'">
            <sons style="width: 100%" @change="( data ) => { $set(form,index,data) }" :val="form[index]" :entityName="item.attr.enName" :multi="item.attr.multi"></sons>
          </template>

        </mu-form-item>
      </mu-col>
    </mu-row>

  </mu-form>
</template>

<script>
/* eslint-disable */
import textItem from '@/components/FormItem/Text/Text'
import Editor from '@/components/FormItem/editor'
import entity from '@/components/FormItem/entity'
import pics from '@/components/FormItem/pics'
import pic from '@/components/FormItem/pic'
import file from '@/components/FormItem/file'
import entityViewer from '@/components/FormItem/entityViewer'
import entityListViewer from '@/components/FormItem/entityListViewer'
import list from '@/components/FormItem/list'
import sons from '@/components/FormItem/sons'
import wangeditor from '@/components/FormItem/wangeditor'
import VueUeditorWrap from 'vue-ueditor-wrap'
import ArrayText from '../../FormItem/arrayText'

export default {
  props: {
    labelPosition: '',
    openEdit: '',
    form: {},
    items: {}
  },
  components: {
    ArrayText,
    VueUeditorWrap,
    entityListViewer,
    entityViewer,
    wangeditor,
    textItem,
    Editor,
    entity,
    list,
    sons,
    pics,
    pic,
    file
  },
  data () {
    return {
      rules: {
        notNull: {
          validate (val) {
            return !!isTrue(val)
          },
          message: '不能为空'
        },
        min (_min) {
          return {
            validate (val) {
              return val.length >= _min
            },
            message: '字符长度不能小于' + _min
          }
        },
        max (_max) {
          return {
            validate (val) {
              return val.length <= _max
            },
            message: '字符长度不能大于' + _max
          }
        },
        len (_len) {
          return {
            validate (val) {
              return val.length === _len
            },
            message: '字符长度必须为' + _len
          }
        },
        isPhone: {
          validate (val) {
            var myreg = /^[1][3,4,5,6,7,8][0-9]{9}$/
            return !!myreg.test(val)
          },
          message: '手机号不合法'
        },
        isNum: {
          validate: function validate (val) {
            var myreg = /^([0-9.])+?$/
            return !!myreg.test(val)
          },
          message: '请输入数字'
        }
      },
      switches: {},
      entityList: {}
    }
  },
  methods: {
    eval (arr) {
      let _this = this
      let rules = []
      arr.map(function (str) {
        rules.push(eval('_this.' + str))
      })
      return rules
    },
    test (html) {
      this.name = html
      console.log(this.name)
      console.log(html)
    },
    openEntity (name) {
      console.log(name)
      this.$set(this.switches, name, true)
    },
    saveEntity (name) {
      console.log(name)
      console.log(this.form[name])
      this.$set(this.switches, name, false)
    },
    closeEntity (name) {
      console.log(this.form[name])
      this.$set(this.switches, name, false)
    },
    setEntity (selects, name) {
      let old = this.form[name]
      console.log(old)
      if (this.items[name].attr.multi === true) {
        selects.map(function (data) {
          old.push(data.id)
        })
      } else {
        old = selects.id
      }
      console.log(old)
      this.$set(this.form, name, old)
      this.$set(this.switches, name, false)
    },
    entityViewerChange (selects, name, data) {
      this.$set(this.form, name, data)
    }
  }

}

function isTrue (param) {
  if (param === '') {
    return false
  }
  if (param === []) {
    return false
  }
  if (param === undefined) {
    return false
  }
  if (param === {}) {
    return false
  }
  if (param === 0) {
    return false
  }
  if (param === '0') {
    return false
  }
  if (param === 'null') {
    return false
  }
  if (param === null) {
    return false
  }
  return true
}
</script>
